<template>
  <!--  新增简历-->
  <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick" style="min-width: 700px;">
    <!--    新增简历-->
    <el-tab-pane label="" name="basic" style="padding-left: 5px">
      <div class="common-layout" >
        <div class="vehicle_application">
          <!--      div的边框设置    -->
          <div class="vehicleForm">
            <!--            新增简历标头-->
            <el-row >
              <el-col :span="24">
                <div class="grid-content ">
                  <span>
                    <h2 v-if="Talentpool.talentsId == '' " class="bg-purple-dark">新增简历</h2>
                    <h2 v-if="Talentpool.talentsId != '' " class="bg-purple-dark">简历详情</h2>
                  </span>
                </div>
              </el-col>
            </el-row>

            <!--            新增简历表单-->
            <div class="vehicleForm_1">
              <el-form
                  :rules="insertRules"
                  ref="ruleFormRef"
                  :model="Talentpool"
              >
                <!--                新增简历信息-->
                <el-form-item>
                  <el-col :span="24"
                          style="background-color: #F4FAFF;
                      border-left: 2px solid #2B9DEC;
                      height: 30px;
                      width: 100%;
                      line-height: 30px;
                      border-bottom: 1px solid #E4E7ED">
                    <div class="grid-content ep-bg-purple-dark"/>
                    <span style="margin-left: 10px;font-size: 12px; color: #868686;">个人信息</span>
                  </el-col>
                </el-form-item>

                <el-form-item label-width="50px">
                  <el-col :span="3">
                    姓名:
                  </el-col>
                  <el-col :span="6">
                    <el-form-item prop="talentsName">
                      <el-input class="inputDeep" placeholder="请输入姓名"  v-model="Talentpool.talentsName"/>
                    </el-form-item>
                  </el-col>
                  <el-col :span="3" :offset="5">
                    手机号码:
                  </el-col>
                  <el-col :span="6">
                    <el-form-item prop="recruitResumePhone">
                      <el-input class="inputDeep" placeholder="请输入手机号码" v-model="Talentpool.talentsPhone" />
                    </el-form-item>
                  </el-col>
                </el-form-item>

                <el-form-item label-width="50px">
                  <el-col :span="3">
                    性别:
                  </el-col>
                  <el-col :span="6">
                    <el-form-item prop="recruitResumeSex">
                      <el-select clearable placeholder="请选择性别" autocomplete="off" style="width:340px" v-model="Talentpool.talentsSex">
                        <el-option label="男" value="1" />
                        <el-option label="女" value="2" />
                      </el-select>
                    </el-form-item>
                  </el-col>
                  <el-col :span="3" :offset="5">
                    投递时间:
                  </el-col>
                  <el-col :span="6">
                    <el-form-item prop="recruitResumeDeliver">
                      <el-date-picker
                          v-model="Talentpool.talentsTime"
                          type="datetime"
                          class="inputDeep"
                          placeholder="Select date and time"
                          autocomplete="off"
                          style="width: 340px"
                          :disabled-date="disabledDate"
                      />
                    </el-form-item>
                  </el-col>
                </el-form-item>

                <el-form-item label-width="50px">
                  <el-col :span="3">
                    年龄:
                  </el-col>
                  <el-col :span="6">
                    <el-form-item prop="recruitResumeMarital">
                      <el-input class="inputDeep" placeholder="请输入你的年龄"  v-model="Talentpool.talentsAge"/>
                    </el-form-item>
                  </el-col>
                  <el-col :span="3" :offset="5">
                    出生日期:
                  </el-col>
                  <el-col :span="6">
                    <el-form-item prop="recruitResumePhone">
                      <el-date-picker
                          v-model="Talentpool.talentsBirthday"
                          type="date"
                          class="inputDeep"
                          autocomplete="off"
                          style="width: 340px"
                          :disabled-date="disabledDate"
                          placeholder="请选择"
                      />
                    </el-form-item>
                  </el-col>
                </el-form-item>

                <el-form-item label-width="50px">
                  <el-col :span="3">
                    籍贯:
                  </el-col>
                  <el-col :span="6">
                    <el-form-item prop="recruitResumeMarital">
                      <el-input class="inputDeep" placeholder="请输入籍贯"  v-model="Talentpool.talentsNative" />
                    </el-form-item>
                  </el-col>
                  <el-col :span="3" :offset="5">
                    婚姻状况:
                  </el-col>
                  <el-col :span="6">
                    <el-form-item prop="recruitResumeSex">
                      <el-select clearable placeholder="请输入婚姻状况" autocomplete="off" style="width:340px" v-model="Talentpool.talentsMarriage">
                        <el-option label="未婚" value="未婚" />
                        <el-option label="已婚" value="已婚" />
                      </el-select>
                    </el-form-item>
                  </el-col>

                </el-form-item>

                <el-form-item label-width="50px">
                  <el-col :span="3">
                    应聘岗位:
                  </el-col>
                  <el-col :span="6">
                    <el-form-item prop="recruitResumeStationName">
                      <el-select :value="d.type" v-model="Talentpool.talentsPosition" clearable placeholder="应聘岗位"  style="width: 340px">
                        <el-option
                            v-for="p in d.type"
                            :label="p.postName"
                            :value="p.postName"

                        />
                      </el-select>
                    </el-form-item>
                  </el-col>
                  <el-col :span="3" :offset="5">
                    人才渠道:
                  </el-col>
                  <el-col :span="6">
                    <el-form-item prop="recruitClassifyName">
                      <el-select :value="d.sourceList" v-model="Talentpool.talentsChannel" placeholder="请选择" style="width: 437px;">
                        <el-option v-for="a in d.sourceList"
                                   :label="a.sourceName"
                                   :key="a.sourceId"
                                   :value="a.sourceName" />
                      </el-select>
                    </el-form-item>
                  </el-col>
                </el-form-item>

                <el-form-item label-width="50px">
                  <el-col :span="3">
                    学历:
                  </el-col>
                  <el-col :span="6">
                    <el-form-item prop="recruitResumeEducation">
                      <el-select :value="d.educationList" v-model="Talentpool.talentsEducation" placeholder="请选择" style="width: 437px;">
                        <el-option v-for="c in d.educationList"
                                   :label="c.educationName"
                                   :key="c.educationId"
                                   :value="c.educationName" />
                      </el-select>
                    </el-form-item>
                  </el-col>
                  <el-col :span="3" :offset="5">
                    工作经验:
                  </el-col>
                  <el-col :span="6">
                    <el-form-item prop="recruitResumeSuffer">
                      <el-select :value="d.experienceList" v-model="Talentpool.talentsExperience" placeholder="请选择" style="width: 297px;">
                        <el-option v-for="d in d.experienceList"
                                   :label="d.experienceName"
                                   :key="d.experienceId"
                                   :value="d.experienceName" />
                      </el-select>
                    </el-form-item>
                  </el-col>
                </el-form-item>

                <el-form-item label-width="50px">
                  <el-col :span="3">
                    QQ:
                  </el-col>
                  <el-col :span="6">
                    <el-form-item prop="recruitResumeMailbox">
                      <el-input class="inputDeep" placeholder="请输入QQ号"  v-model="Talentpool.talentsQq"/>
                    </el-form-item>
                  </el-col>
                  <el-col :span="3" :offset="5">
                    QQ邮箱:
                  </el-col>
                  <el-col :span="6">
                    <el-form-item prop="recruitResumeQq">
                      <el-input class="inputDeep" placeholder="请输入QQ邮箱"  v-model="Talentpool.talentsMailbox" />
                    </el-form-item>
                  </el-col>
                </el-form-item>
                <el-form-item label-width="50px">
                  <el-col :span="3">
                    添加标签:
                  </el-col>
                  <el-col :span="6">
                    <el-form-item prop="recruitResumeRemarks">
                      <el-select
                          filterable="true"
                          allow-create
                          v-model="Talentpool.talentsTalenttag" placeholder="请选择" style="width: 297px;">
                        <el-option label="高学历" value="高学历" />
                        <el-option label="技术达人" value="技术达人" />
                        <el-option label="经验丰富" value="经验丰富" />
                      </el-select>
                    </el-form-item>
                  </el-col>
                </el-form-item>
                <el-form-item label-width="50px">
                  <el-col :span="3">
                    技术:
                  </el-col>
                  <el-col :span="10">
                    <el-form-item prop="recruitResumeRemarks">
                      <el-input class="inputDeep" :rows="5" type="textarea"  v-model="Talentpool.talentsTechnology" />
                    </el-form-item>
                  </el-col>
                </el-form-item>
                <el-form-item style="text-align: right;padding-right: 10px;padding-top: 10px">
                  <el-col>
                    <el-button v-if="zhuangtai['id'] == 3 " type="primary" @click="addTalentpool3()">关注确定</el-button>
                    <el-button v-if="zhuangtai['id'] == 2 " type="primary" @click="addTalentpool2()">人才确定</el-button>
                    <el-button v-if="zhuangtai['id'] == 0 " type="primary" @click="addTalentpool()">简历确定</el-button>
                    <el-button v-if="Talentpool.talentsState == 1 " type="primary" @click="update()">加入人才库</el-button>
                    <el-button @click="fanhui">返 回</el-button>

                  </el-col>
                </el-form-item>

              </el-form>
            </div>
          </div>
        </div>
      </div>
    </el-tab-pane>


  </el-tabs>
</template>

<script lang="ts" setup>
import {reactive, ref, onMounted, onBeforeMount, nextTick} from 'vue'
import type { FormInstance } from 'element-plus'
import { Edit } from '@element-plus/icons-vue'
import {ElMessage} from 'element-plus'
import {Plus} from '@element-plus/icons-vue'
import type {TabsPaneContext, UploadProps} from 'element-plus'
import axios from 'axios'
import {useRouter} from "vue-router";
import {useStore} from "vuex";


const fanhui=()=>{
  router.go(-1);
  resetForm();
}

// 标签页中默认的选中页面
const activeName = ref('basic')
// 标签页的事件
const handleClick = (tab: TabsPaneContext, event: Event) => {
  console.log(tab)
  if (tab.props.name == 'basic') {
    console.log('查询简历详情')
  }
}

let d = reactive({
  //应聘岗位
  type: [],
  //简历详情的数据
  tableData: [],
  //人才渠道数据
  sourceList:[],
  //学历数据
  educationList:[],
  //工作经验数据
  experienceList:[],


});
//查询出所有的工作经验
const experience =()=>{
  axios.post("personnelOa/Experience/selectlist")
      .then((res)=>{
        d.experienceList = res.data.data
        console.log(d.experienceList)

      })
}
//查询出所有学历
const education =()=>{
  axios.post("personnelOa/Education/selectlist")
      .then((res)=>{
        d.educationList = res.data.data
        console.log(d.educationList)

      })
}
//查询出所有用工来源
const source =()=>{
  axios.post("personnelOa/source/selectlist")
      .then((res)=>{
        d.sourceList = res.data.data
        console.log(d.sourceList)

      })
}
const distinct=()=>{
  axios.post("personnelOa/SysPost/post")
      .then((res)=>{
        d.type =res.data.data

      })
      .catch()
}
const disabledDate = (time: Date) => {
  return time.getTime() > Date.now()
}
// 简历详情
let router=useRouter();
const resume=()=>{
  let talentsId =router.currentRoute.value.query
  console.log(talentsId)
  if(talentsId != '' ){
    axios.post("personnelOa/talentpool/resumeid/"+talentsId["id"])
        .then((res)=>{
          d.tableData=res.data.data
          aa(res.data.data);
          console.log(Talentpool)
        })
  }

}
//当前登录这的信息
const store=useStore();
//表单数据模型
let Talentpool = reactive({
  talentsName:'',
  talentsSex:'',
  talentsAge:'',
  talentsBirthday:'',
  talentsPosition:'',
  talentsChannel:'',
  talentsEducation:'',
  talentsExperience:'',
  talentsPhone:'',
  talentsTime:'',
  talentsTechnology:'',
  talentsState:'',
  talentsMailbox:'',
  talentsId:'',
  talentTag:'',
  talentsTalenttag:'',
  talentsMarriage:'',
  talentsNative:'',
  talentsQq:'',
  talentsAnniu:'',
  empId:store.state.user.sysEmployee.empId,

})
const aa=(row)=>{
  Talentpool.talentsId = row.talentsId;
  Talentpool.talentsName = row.talentsName;
  Talentpool.talentsSex = row.talentsSex;
  Talentpool.talentsAge = row.talentsAge;
  Talentpool.talentsBirthday = row.talentsBirthday;
  Talentpool.talentsPosition = row.talentsPosition;
  Talentpool.talentsChannel = row.talentsChannel;
  Talentpool.talentsEducation = row.talentsEducation;
  Talentpool.talentsExperience = row.talentsExperience;
  Talentpool.talentsPhone = row.talentsPhone;
  Talentpool.talentsTime = row.talentsTime;
  Talentpool.talentsTechnology = row.talentsTechnology;
  Talentpool.talentsState = row.talentsState;
  Talentpool.talentsMailbox = row.talentsMailbox;
  Talentpool.talentsTalenttag = row.talentsTalenttag;
  Talentpool.talentsMarriage = row.talentsMarriage;
  Talentpool.talentsNative = row.talentsNative;
  Talentpool.talentsQq = row.talentsQq;
  Talentpool.talentsAnniu = row.talentsAnniu;

}

//清空简历回显
const  resetForm = ()=>{
  Talentpool.talentsName = '';
  Talentpool.talentsSex = '';
  Talentpool.talentsAge = '';
  Talentpool.talentsBirthday ='';
  Talentpool.talentsPosition = '';
  Talentpool.talentsChannel = '';
  Talentpool.talentsPhone = '';
  Talentpool.talentsTime = '';
  Talentpool.talentsEducation = '';
  Talentpool.talentsExperience = '';
  Talentpool.talentsTechnology = '';
  Talentpool.talentsState = '';
  Talentpool.talentsMailbox = '';
  Talentpool.talentsTalenttag = '';
  Talentpool.talentsMarriage = '';
  Talentpool.talentsNative = '';
  Talentpool.talentsQq = '';
}
//新增关注数据
let addss=ref();//新增的返回结果
const addTalentpool3=()=>{
  console.log("hy")
  console.log(Talentpool.talentsName)
  console.log(Talentpool)
  axios.post("personnelOa/talentpool/insertwodegz",Talentpool)
      .then((res)=>{
        addss.value = res.data.data;
        console.log(addss.value)
        if(addss.value==11){
          ElMessage({
            type: 'success',
            message: '添加成功',
          })
          fanhui();
        }
      })
      .catch()
}
//新增人才数据
let adds=ref();//新增的返回结果
const addTalentpool2=()=>{
  console.log("hy"+Talentpool.talentsId)
  axios.post("personnelOa/talentpool/insertTalentpool",Talentpool)
      .then((res)=>{
        adds.value = res.data.data;
        console.log(add.value)
        if(adds.value==10){
          ElMessage({
            type: 'success',
            message: '添加成功',
          })
          fanhui();

        }

      })
      .catch()
}
//新增简历数据
let zhuangtai =router.currentRoute.value.query
console.log(zhuangtai)
let add=ref();//新增的返回结果
const addTalentpool=()=>{
  console.log("hy"+Talentpool.talentsId)
  axios.post("personnelOa/talentpool/insertResume",Talentpool)
      .then((res)=>{
        add.value = res.data.data;
        console.log(add.value)
        if(add.value==2){
          ElMessage({
            type: 'success',
            message: '添加成功',
          })
          fanhui();
        }

      })
      .catch()
}

//添加人才库
let add2=ref();//新增的返回结果
const update=()=>{
  console.log(Talentpool.talentsTalenttag)
  axios.put("personnelOa/talentpool/update/"+Talentpool.talentsTalenttag+"/"+Talentpool.talentsId)
      .then((res)=>{
        add2.value = res.data.data
        console.log("hggggggggggggggggggggg")
        if(add2.value ==4 ){
          ElMessage({
            type: 'success',
            message: '添加成功',
          })
          fanhui();
        }
      })
      .catch()
}
// 表单重置
const ruleFormRef = ref<FormInstance>()

//新增表单的规则
const insertRules = reactive({
  //验证非空和长度
  recruitResumeName: [{
    required: true,
    message: "姓名不能为空！！",
    trigger: "blur"
  },{
    min: 2,
    message: '账号名过短！！',
    trigger: 'blur'
  },{
    max:10,
    message: '账号名过长！！',
    trigger: 'blur'
  }],

  recruitResumePhone:[{pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
    message: "请输入正确的手机号码",
    trigger: "blur"}]
})

//新增表单的提交方法
const addResume = (formEl: FormInstance | undefined)=> {




}

onBeforeMount(async ()=>{
  resume();
  source();
  education();
  experience();
  distinct();
})
</script>

<style scoped>

.bg-purple-dark {
  position: relative;
  display: flex;
  justify-content: center;
}

.vehicle_application{
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
}

.vehicleForm{
  width: 95%;
  height: 90%;
  margin-top: 20px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
  border-radius:  10px;
}
.vehicleForm_1{
  margin-top: 20px;
  /*display: flex;*/
  /*flex-direction: column;*/
}
/*.inputDeep :deep(.el-input__wrapper) {*/
/*  background-color: #FFFFFF;*/
/*  box-shadow: 0 0 0 0;*/

/*}*/
</style>
